{{extend 'layout.html'}}
<script type="text/javascript">
     $(document).ready(function(){
    	 $.ajax({
				type:'GET',
				url:"{{=(URL(request.application, 'default' , 'list_items', args=[prj_code, lang_code]))}}",
				data: '',
				success: function(data) {
					$('#result').html(data);						  		
				}});
    	 $('#add_item').hide();    	 
    	 $("#dialog-confirm").dialog({ autoOpen: false });    	         
     });

     function delete_key(prj_code, lang_code, item_id) {	  
    	  $("#dialog-confirm").dialog("open");
    	  $("#dialog-confirm").dialog({
    		  autoOpen: false,
    		  modal:true,

    		  buttons : {
    			"Yes" : function() {              
    				$(this).dialog("close");
    				// ajax call:	    				
    				$.ajax(
    					{
        					type:'GET',
        					url: '{{=URL("delete_item/")}}'  + prj_code + '/' + lang_code + '/' + item_id ,
        					data:'',
        					success: function(data) {
        						$('#result').html(data);
        					}        					
        				}
    	    		)
    			},
    			"No" : function() {
    				$(this).dialog("close");
    			}
    		  }
    	  });	  	  
    	}

</script>
<br/>


<br/>
<div id='main_table' style="margin-left:auto; margin-right:auto; width:80%;">

<div id="dialog-confirm" title="Confirm">
	{{=T('Are you sure you want to delete the key?')}} 
</div>


<table style="border:2px;width:80%;">
	<thead>
		<tr>
			<th id="search" colspan="5">
				<form name="form_search">
					<label id="item_source__label" for="item_search" >{{=T('Search')}}</label>
					<input type="text" id='search' name="search" style="width: 250px" />
					<input type="hidden" name="prj_code"  value="{{=prj_code}}"/>		
					<input type="hidden" name="lang_code"  value="{{=lang_code}}"/>
				</form>
		
				<script>
					jQuery("#search").keyup(function(){
						if(document.forms.form_search.search.value.length>3 || document.forms.form_search.search.value.length==0)
	      					ajax('{{=URL("search_items")}}', ['search', 'prj_code', 'lang_code' ], 'result')
	      			});
				</script>
			</th>
		</tr>
		<tr>
			<th>
				{{=T('Key')}}
			</th>
			<th>
				{{=T('Source')}}
			</th>
			<th>
				{{=T('Target')}}
			</th>
			<th>
				&nbsp;
			</th>
			<th>
				&nbsp;
			</th>
		</tr>		
	</thead>
	<tbody id='result'  style="border-bottom: 3px solid black;"></tbody>	
</table>

<br/>

{{=IMG(_src=URL( request.application , 'static/images', 'add.png'))}}&nbsp;
{{=A(T('Add new item'), _href='#', _onclick="$('#add_item').show(); $('#form_add_item')[0].reset();")}}
	<script>
		function set_field_callback(obj)
		{
			$('#item_id').attr('value' , obj.id);
			$('#item_key').attr('value' , obj.key);
			$('#item_source').attr('value' , obj.source);
			$('#item_target').attr('value' , obj.target);
			$('#item_comment').attr('value' , obj.comment);
			$('#item_suggestion').attr('value' , obj.suggestion);
			$('#add_item').show();
		}						
	</script>
<br/>
<br/>

<div id='add_item' style='display: visble'> 
 	<form method="post" enctype="multipart/form-data" action="" id='form_add_item'>
		<table style="border-collapse: separate; border-spacing: 5px">
			<tbody>
				<tr id="item_key__row">
					<td class="w2p_fl"><label id="item_key__label" for="item_key">{{=T('Key')}}:</label></td>
					<td class="w2p_fw"><input type="text" value="" name="key" id="item_key" class="string"></td>
					<td class="w2p_fc"></td>
				</tr>
				<tr id="item_source__title">
					<td class="w2p_fl"></td>
					<td class="w2p_fw"><label id="item_source__label" for="item_source" >{{=T('Source Language')}}</label></td>
					<td class="w2p_fc"><label id="item_target__label" for="item_target" >{{=T('Target Language')}}</label></td>
				</tr>
				<tr id="item_source__row">
					<td class="w2p_fl"></td>
					<td class="w2p_fw">
						<textarea rows="10" name="source" id="item_source" cols="40" class="text" lang="{{=src_lang}}">
						</textarea>
					</td>
					<td class="w2p_fc">
						<textarea rows="10" name="target" id="item_target" cols="40" class="text" lang="{{=lang_code}}"></textarea>
					</td>
				</tr>
				<tr id="item_comment__row">
					<td class="w2p_fl"></td>
					<td class="w2p_fw"><label id="item_comment__label" for="item_comment" lang="{{=lang_code}}">Comment:</label></td>
					<td class="w2p_fc"><label id="item_suggestion__label" for="item_suggestion" lang="{{=lang_code}}">Suggestion:</label></td>
				</tr>
				<tr id="item_comment__row">
					<td class="w2p_fl"></td>
					<td class="w2p_fw">
						<input type="text" value="" name="comment" id="item_comment" class="string" lang="{{=src_lang}}"></td>
					<td class="w2p_fc" rowspan="2">
						<textarea rows="3" cols="40" name="suggestion" id='suggestion' lang="{{=src_lang}}"></textarea>
						<br/>
						{{=A(T('Google suggest'), _href='#', _onclick="get_suggest()")}}
						<script type="text/javascript">
							function get_suggest() {
								$.ajax({
									type:'POST',
									url: '{{=URL("suggest/")}}',
									data: {'src_lang':'{{=src_lang}}', 'lang_code':'{{=lang_code}}', 'source':$('#item_source').attr('value')},
									success: function(data) {
										var myjson=eval('(' + data + ')');
										// console.debug(myjson);
										tra=myjson['data']['translations'][0]['translatedText'];
										$('#suggestion').html(tra);
										
									}});
							}
						</script>						
					</td>
				</tr>
				<tr id="item_image__row">
					<td class="w2p_fl">
						<label id="item_image__label" for="item_image" lang="{{=lang_code}}">Image:</label>
					</td>
					<td class="w2p_fw">
						<input type="file" name="image" id="item_image" class="upload"></td>
					<td class="w2p_fc"></td>
				</tr>
				<tr id="submit_record__row">
					<td class="w2p_fl"></td>
					<td class="w2p_fw">
						<input type="submit" value="{{='Save'}}"></td>
					<td class="w2p_fc"></td>
				</tr>
			</tbody>
		</table>
		<div class="hidden">
			<input type="hidden" name="_formname" value="form_item" />
			<input type="hidden" value="{{=project_language}}" name="project_language" id="item_project_language" />
			<input type="text" value="" name="id" id="item_id" />
		</div>
	</form>
	</div>
</div>